<!DOCTYPE html>
<html>

<head>
  <title>
    主页
  </title>
  <link rel='stylesheet' href='/stylesheets/style.css' />
  <meta name="referrer" content="never">

  <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
  <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
  <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

  <style>
    /* .tab {
      background-color: gray;
    }

    .tab>li>a {
      font-size: 22px;
      font-weight: 600;
      color: rgb(165, 165, 165);
    }

    .nav-pills>li>a:hover {
      background-color: #ffffff;
      color: #111111;
      border-radius: 0;
    }

    .nav-pills>li.active>a {
      background-color: #ffffff;
      color: #111111;
    }

    .nav-pills>li.active>a:focus {
      color: #111111;
    } */



    a,
    a:hover,
    a:focus {
      color: #ffffff;
      text-decoration: none;
    }

    .panel-group {
      background-color: #404040;
      width: 250px;
      height: 600px;
      overflow-y: auto;
    }

    .panel-group .panel {
      background-color: #404040;
      border: none;
    }

    .panel-heading {
      border-top-left-radius: 0px;
      border-top-right-radius: 0px;
    }

    .panel-default>.panel-heading {
      border: none;
      color: #ffffff;
      background-color: #505050;
    }

    .panel-default>.panel-heading>span {
      font-size: 10px;
    }

    .panel-default>.panel-heading:active,
    .panel-default>.panel-heading:hover {
      background-color: #4a8bc2;
    }

    .navbar-collapse>.navbar-nav>li:hover {
      background-color: #4a8bc2;
    }

    .panel-default>.panel-heading>a:hover {
      text-decoration: none;
      background-color: #4a8bc2;
    }

    .panel-group .panel-heading+.panel-collapse>.panel-body {
      border: none;
    }

    .panel-body {
      padding: 0px;
    }

    .nav>li {
      padding: 1px 0px 0px 0px;
    }

    .nav>li>a {
      text-decoration: none;
      padding: 10px 10px 10px 35px;
    }

    .nav>li>a:hover,
    .nav>li>a:focus {
      background-color: #505050;
    }

    .nav>navbar-nav>navbar-right>a:hover {
      background-color: #4a8bc2;
    }
  </style>
  <script>
    $(function () {
      $(".li,.left").on("click",function(){
        var address =$(this).attr("href");
        // console.log(address)
        $("iframe").attr("src", address);
      });

      $("#form-search").on('submit', (e) => {
        e.preventDefault()

        var search = $("[name='search']").val().replace(/\s*/g,"");
        var address = '/articles/getbysearch/' + search
        // console.log(address)
        if(search.length > 0)
          $("iframe").attr("src", address);

      })

      $(".panel-heading").on("click", function (e) {
        var idLength = e.currentTarget.id.length;
        var index = e.currentTarget.id.substr(idLength - 1, idLength);
        $("#sub" + index).on('hidden.bs.collapse', function () {
          $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-bottom");
          $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-right");
        })
        $("#sub" + index).on('shown.bs.collapse', function () {
          $(e.currentTarget).find("span").removeClass("glyphicon glyphicon-triangle-right");
          $(e.currentTarget).find("span").addClass("glyphicon glyphicon-triangle-bottom");
        })
      })
      $(".panel-body > .nav > li > a").on("click", function (e) {
        //绑定ph2事件
        $(".ph2").empty();
        $(".ph2").append(e.currentTarget.textContent).change();
        // $('.panel-heading').add(e.currentTarget.textContent);
        // alert(e.currentTarget.textContent);
      });
    });
  </script>
</head>

<body>
  <!-- //顶部导航栏 -->
  <nav class="nanbar navbar-inverse navbar-fixed-top big" role="navigation">
    <div class="container">
      <div class="navbar-header">
        <a href="/index" class="navbar-brand">Forum</a>
      </div>
      <div class="collapse navbar-collapse">
        <!-- 下来菜单 -->
        <div class="dropdown navbar-right">
          <button type="button" class="btn dropdown-toggle" id="dropdownMenu1" data-toggle="dropdown"
            style="background-color: #111111;">
            <img src="/images/html.jpg" id="user_pic" class="img-circle" style="width: 30px;height: 30px;">
          </button>
            <ul class="dropdown-menu pull-right" role="menu" aria-labelledby="dropdownMenu1" style="width: 50px;">
            <li role="presentation">
              <a role="menuitem" tabindex="-1" href="/my/setting">个人设置</a>
            </li>
            <li role="presentation">
              <a class="exit" role="menuitem" tabindex="-1" href="/login">退出登录</a>
            </li>
          </ul>

        </div>
        <!-- 搜索 -->
        <form class="navbar-form navbar-right" id="form-search">
          <input type="text" name="search" class="form-control" placeholder="you can search content">
          <button type="submit" class="btn btn-default">搜索</button>
        </form>
      </div>

    </div>
  </nav>
  <div style="display: flex;">
    <!-- //侧边导航栏 -->

      <div class="panel-group" id="panelContainer">
        <% let i =0, j = 0; %>
        <% for( i=0; i < majorCate.length; i++ ) { %>
        <div class="panel panel-default">
          <div id=<%= "header" + i %>  class="panel-heading" data-toggle="collapse" data-target= <%= "#sub" + i %>
            data-parent="#panelContainer">
            <i class="glyphicon glyphicon-list-alt"></i>
            <a href="javascript:void(0)"><%= majorCate[i].cateName %> </a>
            <span class="glyphicon glyphicon-triangle-right pull-right"></span>
          </div>
          <div id= <%= "sub" + i %>  class="collapse panel-collapse">
            <div class="panel-body">
              <ul class="nav">
                <!-- 专业方向的循环 -->
                <% for(j=0; j < majorData.length; j++) { %>
                  <% if (majorData[j].category === majorCate[i].cateId ) { %>
                    <li class="li left" href="<%= '/articles/getbycate/' + majorData[j].majorId %> ">
                      <a><span class="btn-major" data-id="<%= majorData[j].majorId  %>" ><%= majorData[j].majorName %> </span></a>
                    </li>
                  <% } %>
                <% } %>
              </ul>
            </div>
          </div>
        </div>
        <% } %>
      </div>

    <!-- 内容 -->
    <div class="panel panel-default" style="width:90%; margin:2%">
      <div class="panel-heading">
        <h3 class="panel-title ph2">论坛</h3>
      </div>
      <a href="#" target="_blank" rel="noopener noreferrer"></a>

      <iframe id="iframe" name="iframe" width="100%" height="100%" src="/articles/getall" frameborder="0" seamless></iframe>

    </div>

  </div>
  <script>
    $(() => {

      window.addEventListener("message",(event)=>{
        // console.log(event.data.articleId)
        var articleId = event.data.articleId;
        if (articleId) {
            // location.href = '/content/' + articleId ;

            // window.open("/content/" + articleId)
          //   $.ajax({
          //     method: 'GET',
          //     url: '/content/' + articleId,
          //     success: function(res) {
          //       // var newDoc = newWin.document.open();
          //       // newDoc.write(res)
          //       // newDoc.close();
          //       var newWin = window.open()
          //       newWin.opener = null;
          //       newWin.document.write(res)
          //       newWin.document.close();
          //     }
          //  })
        }
      })
    })

  </script>

  <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  <!-- 导入自己封装的 baseAPI -->
  <script src="/javascripts/baseApi.js"></script>
  <script src="/javascripts/index.js"></script>
  <script src="/javascripts/getuser.js"></script>

</body>

</html>